import React, { useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// import React, { Component } from 'react'
// import { connect } from 'react-redux'

import { actionCreator as ac } from '@/home/category'

import CategoryUi from '../ui/CategoryUi'
/*
@connect(
  state => {
    return {
      cateType: state.category.routeInfo.cateType
    }
  },
  dispatch => ({
    changeCateType(type) {
      dispatch(ac.changeCateType(type))
    },
    changeCateAside(cateAside) {
      dispatch(ac.changeCateAside(cateAside))
    }
  })
)
class Category extends Component {
  // state = {
    // tabIndex: 0,
    // type: 'category'
    // type: this.props.cateType
  // }

  handleClick = (type) => {
    return () => {
      // this.setState({
      //   tabIndex: index,
      //   type: index === 0 ? 'category': 'material',
      // // }, () => {
      // //   this.props.changeCateType(this.state.type)
      // })
      // this.props.changeCateType(this.state.type) // 可以补丁已type 直接使用this.props.cateType
      this.props.changeCateType(type) // 可以补丁已type 直接使用this.props.cateType
      this.props.changeCateAside( type === 'category' ? '热门' :'肉类')
    }
  }

  render() {
    return (
      <CategoryUi 
        // tabIndex={this.state.tabIndex} 
        // type={this.state.type} 
        type={this.props.cateType}
        onCategoryUiClick={this.handleClick}></CategoryUi>
    )
  }
}*/

const Category = (props) => {
  // const cateType = useSelector(state => state.category.routeInfo.cateType)
  const cateType = useSelector(state => state.getIn(['category','routeInfo','cateType']))

  const dispatch = useDispatch()
  const handleClick = useCallback(
    (type) => {
      return () => {
        dispatch(ac.changeCateType(type))
        dispatch(ac.changeCateAside( type === 'category' ? '热门' :'肉类'))
      }
    },
    [dispatch]
  )

  return (
    <CategoryUi
      // type={cateType}
      type={cateType}
      onCategoryUiClick={handleClick}></CategoryUi>
  )
}

export default Category